<template>
  <div class="privacy-settings">
    <van-nav-bar
      title="隐私设置"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="settings-section">
      <van-cell-group>
        <van-cell center title="学习记录">
          <template #right-icon>
            <van-switch v-model="settings.showLearningRecord" size="24" @change="onSettingChange('showLearningRecord')" />
          </template>
        </van-cell>
        <van-cell center title="浏览历史">
          <template #right-icon>
            <van-switch v-model="settings.showBrowsingHistory" size="24" @change="onSettingChange('showBrowsingHistory')" />
          </template>
        </van-cell>
        <van-cell center title="个人主页">
          <template #right-icon>
            <van-switch v-model="settings.showProfile" size="24" @change="onSettingChange('showProfile')" />
          </template>
        </van-cell>
        <van-cell center title="评论点赞">
          <template #right-icon>
            <van-switch v-model="settings.showLikes" size="24" @change="onSettingChange('showLikes')" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <div class="settings-section">
      <van-cell-group>
        <van-cell title="清除浏览历史" is-link @click="showClearHistoryConfirm" />
        <van-cell title="清除搜索记录" is-link @click="showClearSearchConfirm" />
      </van-cell-group>
    </div>

    <!-- 清除确认弹窗 -->
    <van-dialog
      v-model:show="showClearDialog"
      :title="clearDialogTitle"
      show-cancel-button
      @confirm="handleClear"
    >
      <div class="clear-dialog-content">
        {{ clearDialogContent }}
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'

const router = useRouter()
const settings = ref({
  showLearningRecord: true,
  showBrowsingHistory: true,
  showProfile: true,
  showLikes: true
})

// 弹窗控制
const showClearDialog = ref(false)
const clearDialogTitle = ref('')
const clearDialogContent = ref('')
const clearType = ref('')

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 设置变更处理
const onSettingChange = async (key) => {
  try {
    // TODO: 调用接口更新设置
    // await updatePrivacySetting({ key, value: settings.value[key] })
    showSuccessToast('设置已更新')
  } catch (error) {
    console.error('更新设置失败:', error)
    showToast('更新设置失败，请重试')
    // 回滚设置
    settings.value[key] = !settings.value[key]
  }
}

// 显示清除浏览历史确认
const showClearHistoryConfirm = () => {
  clearDialogTitle.value = '清除浏览历史'
  clearDialogContent.value = '确定要清除所有浏览历史吗？此操作无法撤销。'
  clearType.value = 'history'
  showClearDialog.value = true
}

// 显示清除搜索记录确认
const showClearSearchConfirm = () => {
  clearDialogTitle.value = '清除搜索记录'
  clearDialogContent.value = '确定要清除所有搜索记录吗？此操作无法撤销。'
  clearType.value = 'search'
  showClearDialog.value = true
}

// 处理清除操作
const handleClear = async () => {
  try {
    if (clearType.value === 'history') {
      // TODO: 调用接口清除浏览历史
      // await clearBrowsingHistory()
    } else if (clearType.value === 'search') {
      // TODO: 调用接口清除搜索记录
      // await clearSearchHistory()
    }
    showSuccessToast('清除成功')
  } catch (error) {
    console.error('清除记录失败:', error)
    showToast('清除失败，请重试')
  }
}
</script>

<style lang="scss" scoped>
.privacy-settings {
  min-height: 100vh;
  background-color: #f7f8fa;

  .settings-section {
    margin-top: 12px;
  }

  .clear-dialog-content {
    padding: 20px 16px;
    text-align: center;
    color: #646566;
  }
}
</style>
